<template>
    <div>
        <div class="clearfix racItem">
            <div class="rcaNum">充值数量：</div>
            <ul class="rcaListBox">
                <li v-for="(item,i) in transaction" :key="i" 
                    :class="{moneyActive : moneyActive==item.money}"
                @click="Active(item.money,item.currency)"
                    >
                    <p>{{item.currency}}交易币</p>
                    <p>￥{{item.money}}</p>
                </li>
            </ul>
        </div>
        <div class="otherNum">
            <div class="otherNumBtn">
                <button>其他金额数量</button>
            </div>
            <div class="otherMsg">
                <input type="text" placeholder="请输入10的倍数充值数量" @focus="otherMoney" v-model="otherQuota">
                <p style="color: red" v-show="mustNum">{{mustMsg}}</p>
                <p>充值800以上一律92折优惠，企业充值联系电话：400-119-1118</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:"currencyRecharge",
    data(){
        return {
            transaction : [
                {
                    currency : "50",
                    money : "50"
                },
                {
                    currency : "100",
                    money : "98"
                },
                {
                    currency : "300",
                    money : "288"
                },
                {
                    currency : "500",
                    money : "470"
                }
            ],
            moneyActive : "",//选择套餐的高亮
            radio : "1",
            otherQuota : "",//其他金额
            mustNum:false,//是否显示必须为数字
            mustMsg : "充值数量必须为数字",//必须为数字的内容
            coins:0,//充值金额

        }
    },
    watch:{
        otherQuota(newValue){
            if(!newValue){
                this.coins = newValue;
                newValue = 0;
                this.coins = newValue;
                this.mustMsg = "充值数量必须为10的倍数";
                this.$emit("quotaChange",newValue,this.coins);
                return;
            } 
            var re = /^[1-9]+[0-9]*]*$/; //判断字符串是否为数字 
            if (!re.test(newValue)) {
                this.mustNum = true;
                this.mustMsg = "充值数量必须为数字"
                newValue = 0;
                this.$emit("quotaChange",newValue)
            }else if(newValue%10!=0){
                this.mustNum = true;
                this.mustMsg = "充值数量必须为10的倍数"
                newValue = 0;
                this.$emit("quotaChange",newValue)
            }else if(newValue>=10&&newValue<=90){
                this.mustNum = false;
                this.coins = newValue;
                this.$emit("quotaChange",newValue,this.coins);
            }else if(newValue>=100&&newValue<=290){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.98).toFixed(1)
                this.$emit("quotaChange",newValue,this.coins)
            }else if(newValue>=300&&newValue<=490){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.96).toFixed(1)
                this.$emit("quotaChange",newValue,this.coins)
            }else if(newValue>=500&&newValue<=790){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.94).toFixed(1)
                this.$emit("quotaChange",newValue,this.coins)
            }else if(newValue>=800){
                this.mustNum = false;
                this.coins = newValue;
                newValue=this.accMul(newValue,0.92).toFixed(1)
                this.$emit("quotaChange",newValue,this.coins)
            }
            
        }
    },
    methods:{
         errorWarning(msg) {//错误提示
            this.$message({
                message: msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true
            });
        },
        Active(money,currency){//选择套餐的高亮
            this.moneyActive = money;
            this.coins = currency;
            this.$emit("quotaChange",money,this.coins)
        },
        otherMoney(){
            this.moneyActive = ""
        },
         accMul(arg1,arg2){//js乘法运算
            var m=0,s1=arg1.toString(),s2=arg2.toString();
            try{m+=s1.split(".")[1].length}catch(e){}
            try{m+=s2.split(".")[1].length}catch(e){}
            return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
        }
    }
}
</script>
